import Https from "@/utils/Https";
import { Card, Descriptions } from "antd";
import { FC, useEffect, useState } from "react";
import RuleClass from "../index/rule";

const CourseRule: FC<any> = (props) => {
  const calcRule = {
    1: "开课前",
    2: "结束前",
    3: "结束后",
  };
  const { courseType, id, ruleType } = props;
  const [appointRule, setAppointRule] = useState();
  const [open, setOpen] = useState(false);
  const [eusePrivateAppointSet, setEusePrivateAppointSet] = useState<any>({});
  const [courseInfo, setCourseInfo] = useState({});
  const getCourseRule = async (appointRule) => {
    console.log(appointRule, "-appointRule");
    let params = {};
    if (courseType == "2" && appointRule == "1") {
      params = {
        courseId: id,
      };
    }
    let res = await Https.get("/privateAppointSet/info", params, true);
    if (res.code == 200) {
      setEusePrivateAppointSet(res.data);
    }
    console.log(res, "_res");
  };
  let title =
    courseType == "1" ? (
      <div>
        预约设置
        <span
          style={{
            fontSize: "14px",
            color: "rgba(0,0,0,0.45)",
            fontWeight: "normal",
          }}
        >
          (可以到"系统设置/预约设置/私教课" 页面进行设置)
        </span>
      </div>
    ) : (
      <div>预约设置</div>
    );
  const getAppoimentType = (type, startTime, endTime) => {
    if (type == "1") {
      return "当前暂不支持会员自主预约服务";
    } else if (type == "2") {
      if (startTime == 0) {
        return "不限制会员预约时间";
      } else {
        return `课程将在开始前${startTime}分钟开放预约；请合理安排时间，提前进行预约`;
      }
    } else {
      if (startTime == 0 && endTime == 0) {
        return "不限制会员预约时间";
      } else if (startTime == 0 && endTime > 0) {
        return `课程将在开始前${endTime}分钟结束预约；请合理安排时间，提前进行预约`;
      } else if (startTime > 0 && endTime == 0) {
        return `课程将在开始前${startTime}分钟开放预约；请合理安排时间，提前进行预约`;
      } else if (startTime > 0 && endTime > 0) {
        return `课程将在开始前${startTime}分钟开放预约，并于开始前${endTime}分钟结束预约；请合理安排时间，提前进行预约`;
      }
    }
  };
  useEffect(() => {
    if (id) {
      getCourseRule(ruleType);
    }
    setAppointRule(ruleType);
  }, [id, ruleType]);
  return (
    <>
      <Card
        style={{ marginTop: "20px" }}
        title={title}
        extra={
          courseType == "2" && (
            <a
              onClick={() => {
                setOpen(true);
                setCourseInfo({
                  id: id,
                  appointRule: appointRule,
                });
              }}
            >
              编辑
            </a>
          )
        }
      >
        {eusePrivateAppointSet.id && (
          <>
            {courseType == "1" && (
              <Descriptions column={1}>
                <Descriptions.Item label="私教模式">
                  {eusePrivateAppointSet.privateType == "1"
                    ? "代客预约"
                    : `要提前至少${eusePrivateAppointSet.courseAgoAppointLimit}分钟预约上课`}
                </Descriptions.Item>
                <Descriptions.Item label="会员自主取消">
                  {eusePrivateAppointSet.selfAppointCancelFlag == "1"
                    ? "无"
                    : `在开课前${eusePrivateAppointSet.selfAppointCancelBefore} 分钟支持会员自主取消预约`}
                </Descriptions.Item>
                <Descriptions.Item label="自主签到">
                  {eusePrivateAppointSet.selfSigninFlag == "1"
                    ? "无"
                    : `在${calcRule[eusePrivateAppointSet.signinType]}${
                        eusePrivateAppointSet.signinValue
                      }分钟以内签到。`}
                </Descriptions.Item>
                <Descriptions.Item label="扫码签到">
                  {eusePrivateAppointSet.codeSigninFlag == "1"
                    ? "无"
                    : ` 在${calcRule[eusePrivateAppointSet.codeSigninType]}${
                        eusePrivateAppointSet.codeSigninValue
                      }分钟以内签到。`}
                </Descriptions.Item>
                <Descriptions.Item label="教室分配">
                  {eusePrivateAppointSet.classroomConfig == "0"
                    ? "系统自动分配"
                    : "商家线下安排"}
                </Descriptions.Item>
              </Descriptions>
            )}
            {courseType == "2" && (
              <Descriptions column={1}>
                <Descriptions.Item label="预约方式">
                  {getAppoimentType(
                    eusePrivateAppointSet.groupType,
                    eusePrivateAppointSet.groupAppointStartTime,
                    eusePrivateAppointSet.groupAppointEndTime
                  )}
                </Descriptions.Item>
                <Descriptions.Item label="取消预约">
                  {eusePrivateAppointSet.selfAppointCancelFlag == "1"
                    ? "不支持会员自主取消预约"
                    : `团课开课前${eusePrivateAppointSet.selfAppointCancelBefore}分钟支持用户自主取消预约`}
                </Descriptions.Item>
                <Descriptions.Item label="自主签到">
                  {eusePrivateAppointSet.selfSigninFlag == "1"
                    ? "不支持会员自主签到"
                    : `${calcRule[eusePrivateAppointSet.signinType]}${
                        eusePrivateAppointSet.signinValue
                      }分钟以内签到。`}
                </Descriptions.Item>
                <Descriptions.Item label="扫码签到">
                  {eusePrivateAppointSet.codeSigninFlag == "1"
                    ? "不支持会员扫码签到"
                    : ` 在${calcRule[eusePrivateAppointSet.codeSigninType]}${
                        eusePrivateAppointSet.codeSigninValue
                      }分钟以内签到。`}
                </Descriptions.Item>
              </Descriptions>
            )}
          </>
        )}
      </Card>
      <RuleClass
        open={open}
        courseInfo={courseInfo}
        onClose={() => {
          setOpen(false);
        }}
        onSuccess={(val) => {
          setAppointRule(val);
          setOpen(false);
          getCourseRule(val);
        }}
      />
    </>
  );
};
export default CourseRule;
